<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box view_box">
    <div class="navigate_view">
      <template v-if="!loading">
        <span class="navigate_text" @click="back">{{
          detailsInfo.freecoursezone_zhuanqumingcheng
        }}</span>
        <span class="navigate_line">/</span>
        <span class="navigate_text" @click="back">{{
          detailsInfo.freeprofessionalmanagement_zhuanyemingcheng
        }}</span>
        <span class="navigate_line">/</span>
        <span class="navigate_text" @click="back">{{
          detailsInfo.freecoursecategories_leimumingcheng
        }}</span>
        <span class="navigate_line">/</span>
        <span class="navigate_last_text">详情</span>
      </template>
    </div>
    <div class="content" v-loading="loading">
      <div class="course_view">
        <div class="course_le">
          <el-image fit="cover" :src="detailsInfo.fengmiantu" :lazy="true" />
        </div>
        <div class="course_ri">
          <div class="course_title">{{ detailsInfo.kechengbiaoti }}</div>
          <div class="course_info">
            <div class="course_info_le">
              <div class="information">
                节数：{{ detailsInfo.jieshu }}节课程
              </div>
              <div class="information">课时：{{ detailsInfo.keshi }}小时</div>
              <div class="information">
                学习人数：{{ detailsInfo.xunixuexirenshu }}人已学习
              </div>
            </div>
            <div class="course_info_ri" @click="courseCollect">
              <template v-if="detailsInfo.is_collect == 0">
                <img src="../../assets/course/1.png" alt="" />
                <span>收藏</span>
              </template>
              <template v-else>
                <img src="../../assets/course/2.png" alt="" />
                <span>已收藏</span>
              </template>
            </div>
          </div>
          <div class="course_btn">
            <div class="course_price">
              <span class="price_1" v-if="detailsInfo.shoujia == 0">免费</span>
              <span class="price_2" v-else>¥{{ detailsInfo.shoujia }}</span>
            </div>
            <div class="operation">
              <div
                class="operation_1"
                v-if="detailsInfo.is_buy == 0 && detailsInfo.shoujia == 0"
                @click="claimCourses"
              >
                加入课程
              </div>
              <div
                v-if="detailsInfo.is_buy == 0 && detailsInfo.shoujia != 0"
                @click="goDetailsPay"
                class="operation_1"
              >
                立即购买 ¥{{ detailsInfo.shoujia }}
              </div>
              <div class="operation_2" @click="openKefu">联系客服</div>
            </div>
          </div>
        </div>
      </div>
      <div class="course_types">
        <div
          class="types_item"
          v-for="(item, index) in types"
          :key="index"
          @click="selectTypes(index)"
        >
          <div :class="index == typeIndex ? 'item_text' : ''">
            {{ item.name }}
            <span v-if="item.num > 0">({{ item.num }})</span>
          </div>
          <div class="item_line" v-if="index == typeIndex"></div>
        </div>
      </div>
      <div v-if="typeIndex == 0" class="richText">
        <div v-html="detailsInfo.kechengxiangqing"></div>
      </div>
      <template v-if="typeIndex == 1">
        <div
          class="teacher_info"
          v-for="(item, index) in teacherList"
          :key="index"
        >
          <div class="teacher_top">
            <img class="teacher_img" :src="item.jiaoshitouxiang" alt="" />
            <div class="teacher_information">
              <div class="teacher_name">{{ item.jiaoshixingming }}</div>
              <div class="teacher_tip">{{ item.suoshoukexing }}</div>
            </div>
          </div>
          <div class="teacher_content">
            {{ item.jiaoshijianjie }}
          </div>
        </div>
      </template>
      <!-- <template v-if="typeIndex == 2">
                <div class="video_info" @click="seeVideo">
                    <div class="video_title">
                        <span class="video_index">01.</span>
                        <span>数控编程课程知识介绍</span>
                    </div>
                    <div class="video_duction">14分钟</div>
                </div>
            </template> -->
      <!-- 会员课程目录 -->
      <template v-if="typeIndex == 2">
        <div class="catalogue">
          <template v-for="(item, index) in chapterList" :key="index">
            <div class="course_name" @click="getSelectCourse(index)">
              <div class="course_name_1">
                {{ item.xiaokemingcheng }}
              </div>
              <template v-if="detailsInfo.is_buy == 1">
                <div
                  class="operation_btn"
                  v-if="item.is_alert_kaoshi == 1"
                  @click="goCompetence(item.aid)"
                >
                  职业素养
                </div>
                <div
                  class="operation_btn"
                  v-if="item.is_alert_kaoshi == 1"
                  @click="startExam(item.aid)"
                >
                  开始考试
                </div>
                <div
                  class="operation_btn"
                  v-if="item.is_lock == 1"
                  @click="applyUnlock(item.aid)"
                >
                  申请解锁
                </div>
              </template>
              <img
                v-if="!item.isSelect"
                class="select_icon"
                src="../../assets/course/10.png"
                alt=""
              />
              <img
                v-else
                class="select_icon"
                src="../../assets/course/9.png"
                alt=""
              />
            </div>
            <template v-if="item.chapterList.length > 0 && item.isSelect">
              <template v-for="(v1, k1) in item.chapterList" :key="k1">
                <div class="chapter_name" @click="getselectChapter(index, k1)">
                  <div class="chapter_name_1">{{ v1.zhangjiemingcheng }}</div>
                  <template v-if="detailsInfo.is_buy == 1">
                    <div class="operation_btn" @click="goMaterial(v1)">
                      课程资料
                    </div>
                    <div
                      class="operation_btn"
                      @click="goWorks(v1)"
                      v-if="v1.is_finish_chapter == 1"
                    >
                      课程作业
                    </div>
                  </template>

                  <img
                    v-if="!v1.isSelect"
                    class="select_icon"
                    src="../../assets/course/10.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="select_icon"
                    src="../../assets/course/9.png"
                    alt=""
                  />
                </div>
                <template v-if="v1.isSelect">
                  <div
                    class="video_item"
                    v-for="(v, k) in v1.sections_list"
                    :key="k"
                    @click="
                      seeVideo(v.shipin.path, item.is_lock, item.aid, v.aid)
                    "
                  >
                    <div class="video_name">
                      <img
                        v-if="item.is_lock == 1"
                        class="lock_icon"
                        src="../../assets/course/23.png"
                        alt=""
                      />
                      <span>{{ k + 1 }}. {{ v.xiaojiemingcheng }}</span>
                    </div>
                    <div class="study_status">{{ v.learn_info }}</div>
                    <img
                      class="play_icon"
                      src="../../assets/course/11.png"
                      alt=""
                    />
                  </div>
                </template>
              </template>

              <div class="ability_box" v-if="item.nenglipinggu.length > 0">
                <div class="table_title">老师能力评估</div>
                <div class="tab_content">
                  <div class="table_th">
                    <div class="th_item th_w_1">课程技能</div>
                    <div class="th_item th_w_2">评分</div>
                    <div class="th_item th_w_3">备注</div>
                  </div>
                  <div class="table_td" v-for="(v2, k2) in item.nenglipinggu" :key="k2">
                    <div class="td_item th_w_1">{{ v2.jinengmingcheng }}</div>
                    <div class="td_item th_w_2">
                      <el-rate
                        :disabled="true"
                        v-model="v2.pingfen"
                        size="small"
                        :max="5"
                        :clearable="true"
                        void-color="#E6E6E6"
                      />
                    </div>
                    <div class="td_item th_w_3">
                      <div v-html="v2.beizhu"></div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>
      <template v-if="typeIndex == 3">
        <div class="rate_title">
          <span>好评率：</span>
          <span class="rate_title_num">{{ statisticsInfo.good_radio }}%</span>
        </div>
        <div class="rate_tabs">
          <div
            class="rate_tabs_item"
            :class="tab_index == 0 ? 'rate_active_item' : ''"
            @click="selectCourseEvaluate(0)"
          >
            全部({{
              statisticsInfo.total_comments_num > 9999
                ? "9999+"
                : statisticsInfo.total_comments_num
            }})
          </div>
          <div
            class="rate_tabs_item"
            :class="tab_index == 1 ? 'rate_active_item' : ''"
            @click="selectCourseEvaluate(1)"
          >
            好评({{
              statisticsInfo.good_comments_num > 9999
                ? "9999+"
                : statisticsInfo.good_comments_num
            }})
          </div>
          <div
            class="rate_tabs_item"
            :class="tab_index == 2 ? 'rate_active_item' : ''"
            @click="selectCourseEvaluate(2)"
          >
            中评({{
              statisticsInfo.medium_comments_num > 9999
                ? "9999+"
                : statisticsInfo.medium_comments_num
            }})
          </div>
          <div
            class="rate_tabs_item"
            :class="tab_index == 3 ? 'rate_active_item' : ''"
            @click="selectCourseEvaluate(3)"
          >
            差评({{
              statisticsInfo.negative_comments_num > 9999
                ? "9999+"
                : statisticsInfo.negative_comments_num
            }})
          </div>
          <div
            class="rate_tabs_item"
            :class="tab_index == 4 ? 'rate_active_item' : ''"
            @click="selectCourseEvaluate(4)"
          >
            有图({{
              statisticsInfo.have_image_num > 9999
                ? "9999+"
                : statisticsInfo.have_image_num
            }})
          </div>
        </div>
        <div class="rate_list" v-loading="evaluateloading">
          <div
            class="list_item"
            v-for="(item, index) in evaluateList"
            :key="index"
          >
            <div class="list_item_person">
              <img :src="item.user_avatar" alt="" />
              <div class="person_name">
                <div class="person_name_1">{{ item.real_name }}</div>
                <div class="person_name_2">
                  <el-rate
                    :disabled="true"
                    v-model="item.xingji"
                    size="small"
                    :max="5"
                    :clearable="true"
                    void-color="#E6E6E6"
                  />
                </div>
              </div>
            </div>
            <div class="list_item_content">
              {{ item.pingjianeirong }}
            </div>
            <div class="list_item_picture" v-if="item.pingjiatu.length > 0">
              <el-image
                :preview-src-list="item.pingjiatu"
                :initial-index="index"
                v-for="(url, index) in item.pingjiatu"
                :key="index"
                :src="url"
                fit="cover"
                :lazy="true"
              />
            </div>
          </div>
        </div>
        <div class="no_data" v-if="evaluateList.length == 0 && !loading">
          <img class="no_img" src="../../assets/default/12.png" alt="" />
        </div>
        <div class="paging_content">
          <paging
            :total="total"
            :pageSize="pageSize"
            @pageChange="pageChange"
          ></paging>
        </div>
      </template>
    </div>
  </div>
  <div
    class="operation_view"
    v-if="detailsInfo.is_alert_kaoshi == 1"
    @click="practicalOperation"
  >
    <img src="../../assets//course/12.png" alt="" />
  </div>
  <footerPage></footerPage>

  <viewVideo
    :url="videoUrl"
    ref="videoText"
    @closeVideo="uploadVideo"
  ></viewVideo>

  <kefu ref="kefuText"></kefu>

  <modalText
    ref="modalPopup"
    :tip="modalTitle"
    :text="modalContent"
    :confirmText="confirmText"
    @confirm="modalConfirm"
  ></modalText>
</template>

<script setup name="courseDetail">
import {
  post65e5af217950c,
  post65e5b07d19b45,
  post65eae26d181f2,
  post66262e3666cf2,
  post65e5af5389521,
  post65e5b1469abbd,
  post66273086daf6e,
  post65eee308f0271,
  post65eee5da25192,
  post661f85df827e6,
} from "@/utils/api.js";
import { ref, reactive, onMounted, inject, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import paging from "@/components/paging.vue";
import viewVideo from "@/components/viewVideo.vue";
import modalText from "@/components/modalText.vue";
import kefu from "@/components/kefu.vue";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const { userInfo } = toRefs(userStore);
import emitter from "@/utils/mitt.js";

const injectMessage = inject("$message");

let aid = route.query.aid; // 课程id
let modalTitle = ref("");
let modalContent = ref("");
let confirmText = ref("");

let types = ref([
  {
    name: "课程详情",
    num: 0,
  },
  {
    name: "老师介绍",
    num: 0,
  },
  {
    name: "课程目录",
    num: 0,
  },
]);
let typeIndex = ref(0);
function selectTypes(index) {
  typeIndex.value = index;
}
onMounted(() => {
  getCourseDetails();
  getCourseTeacher();
  getChapter();
  //   getCourseEvaluate();
});
// 客服
let kefuText = ref(null);
function openKefu() {
  kefuText.value.openPopup();
}

// 课程详情 post65e5af217950c
let detailsInfo = ref({});
let loading = ref(true);
function getCourseDetails() {
  post65e5af217950c({
    aid: aid,
    user_id: userInfo.value.id ? userInfo.value.id : "",
  })
    .then((res) => {
      // console.log(res);
      loading.value = false;
      if (res.code == 1) {
        detailsInfo.value = res.data;
        if (detailsInfo.value.shoujia > 0) {
          types.value = [
            {
              name: "课程详情",
              num: 0,
            },
            {
              name: "老师介绍",
              num: 0,
            },
            {
              name: "课程目录",
              num: 0,
            },
            {
              name: "用户评价",
              num: 0,
            },
          ];
          getStatistics();
          getCourseEvaluate();
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 课程收藏
function courseCollect() {
  post65eae26d181f2({
    freecourselist_id: aid,
  })
    .then((res) => {
      if (res.code == 1) {
        injectMessage.success(res.msg);
        getCourseDetails();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 免费领取课程
function claimCourses() {
  post66262e3666cf2({
    freecourselist_id: aid,
  })
    .then((res) => {
      if (res.code == 1) {
        emitter.emit("paySuccess");
        injectMessage.success(res.msg);
        getCourseDetails();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 授课老师
let teacherList = ref([]);
function getCourseTeacher() {
  post65e5b07d19b45({
    freekechengliebiao_id: aid,
  })
    .then((res) => {
      if (res.code == 1) {
        teacherList.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 课程章节
let chapterList = reactive([]);
function getChapter() {
  post65e5af5389521({
    freecourselist_id: aid,
    user_id: userInfo.value.id ? userInfo.value.id : "",
  }).then((res) => {
    console.log(res);
    if (res.code == 1) {
      chapterList = Object.assign(chapterList, res.data);
      if (chapterList.length > 0) {
        chapterList.forEach((v, k) => {
          v.isSelect = false;
          if (v.chapterList.length > 0) {
            v.chapterList.forEach((val, key) => {
              val.isSelect = false;
            });
          }
        });
      }
    }
  });
}
// 选择课程-折叠
function getSelectCourse(index) {
  chapterList[index].isSelect = !chapterList[index].isSelect;
}
// 选择章节
function getselectChapter(index, index1) {
  chapterList[index].chapterList[index1].isSelect =
    !chapterList[index].chapterList[index1].isSelect;
}
// 课程评价数量统计
let statisticsInfo = ref({});
function getStatistics() {
  post66273086daf6e({
    freecourselist_id: aid,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        statisticsInfo.value = res.data;
        types.value[3].num = statisticsInfo.value.total_comments_num;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 课程评价
let evaluateList = reactive([]);
let total = ref(0);
let pageNum = ref(1);
let pageSize = ref(10);
let evaluateloading = ref(true);
function getCourseEvaluate() {
  post65e5b1469abbd({
    freecourselist_id: aid,
    page: pageNum.value,
    list_rows: pageSize.value,
    type: tab_index.value,
  })
    .then((res) => {
      // console.log(res);
      evaluateloading.value = false;
      if (res.code == 1) {
        total.value = res.data.total;
        evaluateList = res.data.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 选择评价
let tab_index = ref(0);
function selectCourseEvaluate(index) {
  tab_index.value = index;
  evaluateloading.value = true;
  pageNum.value = 1;
  getCourseEvaluate();
}
// 分页
function pageChange(page) {
  pageNum.value = page;
  evaluateloading.value = true;
  getCourseEvaluate();
}

// 去购买课程
function goDetailsPay() {
  post65eee308f0271({
    freecourselist_id: aid,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        router.push({
          path: "/pay",
          query: {
            aid: aid,
            price: detailsInfo.value.shoujia,
            order_sn: res.data.dingdanhao,
          },
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 观看视频
let videoText = ref(null);
let videoUrl = ref("");
let section_id = ref(""); // 节id
function seeVideo(url, is_lock, aid, sectionId) {
  section_id.value = sectionId;
  if (detailsInfo.value.is_buy == 0) {
    injectMessage.error("请领取或购买课程后查看");
    return;
  }
  if (is_lock == 1) {
    applyUnlock(aid);
    return;
  }
  if (!url) {
    injectMessage.error("视频出错了，稍后再试");
    return;
  }
  videoUrl.value = url;
  videoText.value.openVideo();
}
// 更新视频学习进度
function uploadVideo(e) {
  console.log(e);
  post65eee5da25192({
    seconds: e,
    freecoursesections_id: section_id.value,
  }).then((res) => {
    console.log(res);
    if (res.code == 1) {
      getChapter();
    }
  });
}
// 解锁章节
let popup_type = ref(1); // 弹窗操作类型 1申请解锁
let chapter_id = ref(""); // 小课id
function applyUnlock(aid) {
  popup_type.value = 1;
  chapter_id.value = aid;
  modalTitle.value = "提示";
  modalContent.value = "解锁后可观看该章节内容";
  confirmText.value = "解锁";
  modalPopup.value.openModal();
}
function modalConfirm() {
  if (popup_type.value == 1) {
    post661f85df827e6({
      freexiaokeliebiao_id: chapter_id.value,
    })
      .then((res) => {
        if (res.code == 1) {
          injectMessage.success(res.msg);
          // getChapter();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
// 课程资料
function goMaterial(item) {
  router.push({
    path: "/courseMaterial",
    query: {
      aid: item.aid,
      freecoursezone_zhuanqumingcheng:
        detailsInfo.value.freecoursezone_zhuanqumingcheng,
      freeprofessionalmanagement_zhuanyemingcheng:
        detailsInfo.value.freeprofessionalmanagement_zhuanyemingcheng,
    },
  });
}
// 课程作业
let modalPopup = ref(null);
function goWorks(item) {
  // modalPopup.value.openModal();
  router.push({
    path: "/courseAssignments",
    query: {
      type: 1,
      aid: item.aid,
      freecoursezone_zhuanqumingcheng:
        detailsInfo.value.freecoursezone_zhuanqumingcheng,
      freeprofessionalmanagement_zhuanyemingcheng:
        detailsInfo.value.freeprofessionalmanagement_zhuanyemingcheng,
    },
  });
}
// 开始考试
function startExam(course_id) {
  router.push({
    path: "/courseAssignments",
    query: {
      type: 2,
      aid: course_id,
      freecoursezone_zhuanqumingcheng:
        detailsInfo.value.freecoursezone_zhuanqumingcheng,
      freeprofessionalmanagement_zhuanyemingcheng:
        detailsInfo.value.freeprofessionalmanagement_zhuanyemingcheng,
    },
  });
}
// 申请实操
function practicalOperation() {
  router.push({
    path: "/courseAssignments",
    query: {
      type: 3,
      aid: aid,
      freecoursezone_zhuanqumingcheng:
        detailsInfo.value.freecoursezone_zhuanqumingcheng,
      freeprofessionalmanagement_zhuanyemingcheng:
        detailsInfo.value.freeprofessionalmanagement_zhuanyemingcheng,
    },
  });
}
// 职业素养
function goCompetence(course_id) {
  router.push({
    path: "/competence",
    query: {
      course_id: course_id,
      freecoursezone_zhuanqumingcheng:
        detailsInfo.value.freecoursezone_zhuanqumingcheng,
      freeprofessionalmanagement_zhuanyemingcheng:
        detailsInfo.value.freeprofessionalmanagement_zhuanyemingcheng,
    },
  });
}

function back() {
  router.go(-1);
}
</script>

<style lang="scss" scoped>
.view_box {
  margin-top: 97px;
  margin-bottom: 24px;
  .navigate_view {
    display: flex;
    align-items: center;
    padding: 13.5px 0 12px 0;
    .navigate_text {
      font-size: 9px;
      color: #666;
      cursor: pointer;
    }
    .navigate_line {
      font-size: 9px;
      color: #bfbfbf;
      margin: 0 5px;
    }
    .navigate_last_text {
      font-size: 9px;
      color: #1f52ae;
      cursor: pointer;
    }
  }
  .content {
    background: #fff;
    padding: 16px;
    .course_view {
      display: flex;
      .course_le {
        width: 360px;
        height: 202px;
      }
      .course_ri {
        position: relative;
        width: calc(100% - 360px);
        padding-left: 16px;
        .course_title {
          font-size: 14px;
          font-weight: bold;
        }
        .course_info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .course_info_le {
            .information {
              margin-top: 12px;
              color: #666;
              font-size: 9px;
            }
          }
          .course_info_ri {
            display: flex;
            align-items: center;
            font-size: 8px;
            cursor: pointer;
            img {
              width: 10px;
              height: 10px;
              margin-right: 4px;
            }
          }
        }
        .course_btn {
          width: 100%;
          position: absolute;
          left: 16px;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .course_price {
            .price_1 {
              color: #62ce96;
              font-size: 12px;
              font-weight: bold;
            }
            .price_2 {
              color: #f43024;
              font-size: 12px;
              font-weight: bold;
            }
          }
          .operation {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding-right: 16px;
            .operation_1 {
              min-width: 79px;
              height: 24px;
              background: #1f52ae;
              border-radius: 3px;
              font-size: 8px;
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              padding: 0 10px;
            }
            .operation_2 {
              border: 0.5px solid #1f52ae;
              width: 79px;
              height: 24px;
              background: #fff;
              border-radius: 3px;
              font-size: 8px;
              color: #1f52ae;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              margin-left: 12px;
            }
          }
        }
      }
    }
    .course_types {
      margin-top: 20px;
      padding-bottom: 6.5px;
      border-bottom: 1px solid #eee;
      display: flex;
      .types_item {
        margin-right: 28px;
        position: relative;
        cursor: pointer;
        font-size: 9px;
        color: #999;
        .item_text {
          color: #1f52ae;
          font-weight: bold;
        }
        .item_line {
          width: 20px;
          height: 1.5px;
          background: #1f52ae;
          position: absolute;
          left: 50%;
          bottom: -6px;
          transform: translateX(-50%);
        }
      }
    }
    .richText {
      padding-top: 16px;
      font-size: 8px;
    }
    .teacher_info {
      padding: 16px 0;
      border-bottom: 1px solid #eee;
      .teacher_top {
        display: flex;
        align-items: center;
        .teacher_img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
          object-fit: cover;
        }
        .teacher_information {
          .teacher_name {
            font-size: 9px;
            font-weight: 500;
          }
          .teacher_tip {
            font-size: 7px;
            color: #999;
            margin-top: 4px;
          }
        }
      }
      .teacher_content {
        font-size: 8px;
        color: #666;
        margin-top: 12px;
        line-height: 13px;
      }
    }
    .video_info {
      padding: 16px 0 12px 0;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      .video_title {
        font-size: 9px;
        font-weight: bold;
        color: #333;
        .video_index {
          margin-right: 3px;
        }
      }
      .video_duction {
        font-size: 8px;
        color: #999;
        padding-left: 16px;
        margin-top: 8px;
      }
    }
    .catalogue {
      .course_name {
        display: flex;
        align-items: center;
        margin-top: 14px;
        cursor: pointer;
        .course_name_1 {
          font-size: 9px;
          font-weight: bold;
        }
      }
      .chapter_name {
        display: flex;
        align-items: center;
        margin-top: 7.5px;
        cursor: pointer;
        .chapter_name_1 {
          font-size: 8px;
        }
      }
      .video_item {
        background: #f6f7f9;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        margin-top: 8px;
        margin-left: 16px;
        cursor: pointer;
        .video_name {
          font-size: 8px;
          display: flex;
          align-items: center;
          .lock_icon {
            width: 8px;
            height: 8px;
            margin-right: 5px;
          }
        }
        .study_status {
          font-size: 8px;
          color: #666;
          margin-left: 20px;
        }
        .play_icon {
          width: 9px;
          height: 9px;
          margin: 0 0 0 auto;
        }
      }
      .ability_box {
        margin-top: 12px;
        .table_title {
          font-size: 8px;
          font-weight: 500;
          margin-bottom: 8px;
        }
        .tab_content {
          .table_th {
            background: #f6f7f9;
            border-top: 1px solid #eeeeee;
            border-left: 1px solid #eeeeee;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            .th_item {
              padding: 8.5px 12px;
              // padding: 0 12px;
              border-right: 1px solid #eeeeee;
              font-size: 7px;
              color: #666;
            }
          }
          .table_td {
            border-left: 1px solid #eeeeee;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            .td_item {
              padding: 8.5px 12px;
              border-right: 1px solid #eeeeee;
              font-size: 7px;
              display: flex;
              align-items: center;
            }
          }
          .th_w_1 {
            width: 275px;
          }
          .th_w_2 {
            width: 138px;
          }
          .th_w_3 {
            width: 275px;
          }
          .table_td:hover {
            background: #f6f7f9;
          }
        }
      }
      .operation_btn {
        width: 38px;
        height: 13px;
        background: #1f52ae;
        border-radius: 2px;
        font-size: 7px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6px;
        cursor: pointer;
      }
      .select_icon {
        width: 8px;
        height: 8px;
        margin: 0 0 0 auto;
      }
    }
    .rate_title {
      display: flex;
      align-items: center;
      font-size: 8px;
      .rate_title_num {
        font-size: 24px;
        font-weight: 500;
        color: #f43024;
      }
    }
    .rate_tabs {
      overflow: hidden;
      .rate_tabs_item {
        float: left;
        font-size: 8px;
        color: #666;
        padding: 7.5px 12px;
        cursor: pointer;
      }
      .rate_active_item {
        color: #1f52ae !important;
        font-weight: 500;
        background: #f6f7f9;
      }
    }
    .rate_list {
      .list_item {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        .list_item_person {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
          }
          .person_name {
            margin-left: 8px;
            .person_name_1 {
              font-size: 9px;
              font-weight: bold;
            }
            .person_name_2 {
              height: 10px;
              line-height: 0;
            }
          }
        }
        .list_item_content {
          font-size: 8px;
          margin-top: 10px;
        }
        .list_item_picture {
          margin-top: 8px;
          .el-image {
            width: 57px !important;
            height: 57px !important;
            margin-right: 5px !important;
            border-radius: 2px !important;
          }
        }
      }
    }
  }
  .paging_content {
    margin: 20px 0 0;
  }
}
.operation_view {
  width: 56px;
  height: 56px;
  position: fixed;
  right: 48px;
  bottom: 120px;
  z-index: 99;
  cursor: pointer;
}
</style>